<template>
  <div class="table-content-s">
    <el-table
      ref="filterTable"
      :key="paramKey"
      :data="tabData"
      :show-summary="showSummary"
      :height="height"
      :row-key="rowKey"
      :stripe="stripe"
      :border="border"
      highlight-current-row
      :span-method="objectSpanMethod"
      :default-expand-all="defaultExpandAll"
      @toggleRowExpansion="toggleRowExpansion"
      @expand-change="expandChange"
      @selection-change="handleSelectionChange"
      @select="select"
      @select-all="selectAll"
      @sort-change="handSortChange"
    >
      <el-table-column v-if="needIndex" type="index" width="70" label="序号" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column v-if="needSelect" type="selection" width="45" align="center" />
      <el-table-column
        v-for="(item, index) in tableItems"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :type="item.isType"
        :fixed="item.fixed"
        :a-link="item.aLink"
        :header-align="item.align || 'left'"
        :show-overflow-tooltip="tooltip"
        :align="item.align || 'left'"
        :min-width="item.width || 120"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.type === 'slot'"
            :name="item.slotType"
            :scope="scope"
          />
          <div v-else :style="'cursor: pointer;color:' + item.color">
            {{ scope.row[item.prop] | format(item) }} {{ item.unit }}
          </div>
        </template>
      </el-table-column>
      <template slot="empty">
        <img class="tab-img" src="../../assets/img/table.png">
        <div>暂无数据</div>
      </template>
    </el-table>
    <div v-show="hasPage" class="pagesss">
      <el-pagination
        class="page"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRecored"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { format } from '@/utils/commonUtil'
export default {
  name: 'TableModel',
  filters: {
    format(value, item) {
      if (item.filter && item.filter === 'filter') {
        let codes = ''
        item.filterList.forEach(itme => {
          if (Object.prototype.toString.call(value) === '[object Null]' && itme.val === value) {
            codes = itme.name
          } else if (itme.val === '---1' && Object.prototype.toString.call(value) !== '[object Null]') {
            codes = itme.name
          } else if (itme.val * 1 === value * 1) {
            codes = itme.name
          }
        })
        return codes
      }
      if (item.filter && item.filter.startsWith('toFixed')) {
        return value ? (value * 1).toFixed(item.filter.split('_')[1] || 2) : 0
      }
      if (item.filter && item.filter.startsWith('thousand')) {
        return value ? format(value) : format(0)
      }
      if (item.filter && item.filter.startsWith('billion')) {
        // console.log(' item.filterNum item.filterNum item.filterNum item.filterNum item.filterNum', item.filterNum)
        return value ? format(value, item.filterNum, 'billion') : format(0, item.filterNum, 'billion')
      }
      if (item.fn) {
        return item.fn(value)
      }
      return Object.prototype.hasOwnProperty.call(item, item.prop)
        ? item[item.prop][value] || item[item.prop]['default']
        : value
    }
  },
  props: {
    paramKey: {
      type: [Number, String],
      default: 'id'
    },
    lazy: {
      type: Boolean,
      default: false
    },
    tooltip: {
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    currentPage: {
      type: Number,
      default: 1
    },
    rowKey: { // 标识 必传
      type: String,
      default: 'id'
    },
    propHeight: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 20
    },
    totalRecored: {
      type: Number,
      default: 0
    },
    tabData: {
      type: Array,
      default() {
        return []
      }
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    needIndex: {
      type: Boolean,
      default: true
    },
    needSelect: {
      type: Boolean,
      default: false
    },
    hasPage: {
      // 是否需要展示分页
      type: Boolean,
      default: true
    },
    otherHight: {
      // 其它需要减去的高度
      type: Number,
      default: 0
    },
    isHeigth: {
      // 是否需要自动计算高度
      type: Boolean,
      default: true
    },
    defaultExpandAll: {
      // 默认是否全展开
      type: Boolean,
      default: true
    },
    selectFilter: {
      // 用来判断哪个值可以选择
      type: Number,
      default: 1
    },
    fixedNumber: {
      // 用来判断保留几位，默认2位
      type: Number,
      default: 2
    },
    tableItems: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      height: 200,
      row: ''
    }
  },
  mounted() {
    if (this.isHeigth) {
      window.onresize = () => {
        this.setTableHeight()
      }
    }
    this.setTableHeight()
  },
  methods: {
    setTableHeight() {
      if (this.isHeigth) {
        setTimeout(() => {
          this.height = this.$Util.calcHight(this.otherHight)
        }, 100)
      } else {
        this.$nextTick(() => {
          this.propHeight ? this.height = this.propHeight : this.height = 200
        })
      }
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    select(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll(selection) {
      this.$emit('selectAll', selection)
    },
    handSortChange(val) {
      this.$emit('handSortChange', val)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.needSpan) {
        return
      }
      if (columnIndex < 11) {
        if (row.lent) {
          return {
            rowspan: row.lent,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    toggleRowExpansion(row, expanded) {
      this.$emit('toggleRowExpansion', row, expanded)
    },
    expandChange(row, expandRows) {
      this.$emit('expandChange', row, expandRows)
    }
  }
}
</script>
<style>
.table-content-s {
  cursor: pointer;
}
.table-content-s .el-dropdown-link {
  color: #274FFB;
  font-size: 12px !important;
  margin-left: 6px;
}
.table-content-s .fl-l {
  float: left;
}
.table-content-s .fl-r {
  float: right;
  height: 32px;
  line-height: 32px;
}
.el-table th:first-child{
  padding-left: 0 !important;
}
.el-tooltip__popper{
  max-width: 500px;
}
.pagesss {
  text-align: right;
}
.table-content-s .cell div{
  display: inline-block;
}
.tab-img{
  width: 120px;
  height: 80px;
  margin: 0 auto;
}
.el-table__empty-text{
  line-height:0;
}
.btn-cls{
  background: #1773f1;
  border: 1px solid #1773f1;
}
.btn-cls:visited{
  background: #1773f1;
  border: 1px solid #1773f1;
}
</style>
